<template>
    <div>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm placeholder-box"
        >
            <el-form-item
                :label="res.title"
                :prop="res.type"
                v-for="(res, index) in substance"
                :key="index"
                :class="{disabled: res.disabled}"
            >
                <el-input
                    :placeholder="res.placeholder"
                    v-model="res.val"
                    :show-password="res.showPassword"
                    :disabled="res.disabled"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <div class="save-button click-pointer" @click="submitForm">确认修改</div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'formDeploy',
    components: {},
    props: {
        deployRule: {
            type: Array,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: [],
        },
    },
    data() {
        return {
            substance: [],
        };
    },
    computed: {
        ruleForm() {
            let a = this.substance.reduce((obj, res) => {
                if (!res.disabled) {
                    obj[res.type] = res.val;
                }
                return obj;
            }, {});
            return a;
        },
        rules() {
            return this.deployRule.reduce((obj, it) => {
                obj[it.type] = it.rules;
                return obj;
            }, {});
        },
    },
    methods: {
        submitForm() {
            this.$emit('submitForm', this.ruleForm);
        },
    },
    mounted() {
        this.substance = JSON.parse(JSON.stringify(this.deployRule));
    },
};
</script>

<style scoped>
/* 组件样式 */
.placeholder-box {
    color: #fff;
    /* display: flex; */
    /* justify-content: flex-start; */
    margin-top: 20px;
}

.placeholder-box >>> .el-input__inner {
    background: none;
    border: #0177fd 1px solid;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 38px;
    height: 38px;
}

.disabled >>> .el-input__inner {
    background: #2d4081;
}

.placeholder-box >>> .el-input-group__append {
    background: none;
    border: none;
    color: #fff;
    background-image: url('@/assets/img/fg-button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translateX(10px);
}

.placeholder-box >>> .el-form-item__label {
    color: #fff;
    width: 120px;
}

.save-button {
    background-image: url('@/assets/img/save-button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 160px;
    line-height: 44px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    margin-left: auto;
}
</style>
